<template>
  <view class="content">
    <u-navbar height="50" :is-back="false" background="#2688C7" :border-bottom="false" />
    <tabBar :selectedIndex="1"></tabBar>
    <image class="layoutView" :src="getImageUrl('bg.jpg')" mode="aspectFill"></image>

    <view class="top-bar">
      <view class="bar-left"> 我的 </view>
      <view class="bar-right">
        <!-- <view class="msg-area" @click="routeToMsg">
					<u-icon :name="getImageUrl('zx')" size="48"></u-icon>
					<u-badge size="mini" :count="7" :offset="[-10,-12]" type="error"></u-badge>
				</view> -->
        <u-icon @click="onSetting" name="/static/img/sz.png" size="50"></u-icon>
      </view>
    </view>
    <view class="contentView">
      <view class="userView" v-if="userInfo">
        <u-avatar :src="userInfo.avatar" size="120" mode="circle"></u-avatar>
        <view class="userInfo">
          <view class="username">{{ userInfo.nickname || '用户昵称' }}</view>
          <view style="display: flex">
            <view class="userType" style="background-color: #e6f0f5; color: #008ed6">业务员</view>
          </view>
        </view>
      </view>
      <view class="userView" v-else @click="onLogin()">
        <u-avatar size="120" mode="circle"></u-avatar>
        <view class="userInfo">
          <view class="logoBtn">还未登录账号</view>
          <text class="logo-btn"> 立即登录 </text>
        </view>
      </view>

      <view class="orderView">
        <view class="orderTab">
          <view
            class="activeTab"
            @click="routeTo('/other_center/salesman-performance/salesman-performance?status=1')"
            >我的月绩</view
          >
          <view class="otherText">
            <text style="margin-right: 8rpx">业绩明细</text>
            <u-icon name="/static/more.png" size="14"></u-icon>
          </view>
        </view>
        <view class="tabItemView">
          <view
            class="tabItem"
            @click="routeTo('/other_center/salesman-performance/salesman-performance?status=2')"
          >
            <view class="tabNumber">
              {{ count.waitSettlementPrice ? (count.waitSettlementPrice * 0.01).toFixed(2) : 0 }}
            </view>
            <view class="tabTitle2">本月已入账业绩</view>
          </view>
          <view
            class="tabItem"
            @click="routeTo('/other_center/salesman-performance/salesman-performance?status=1')"
          >
            <view class="tabNumber">
              {{
                count.alreadySettlementPrice ? (count.alreadySettlementPrice * 0.01).toFixed(2) : 0
              }}
            </view>
            <view class="tabTitle2">本月待结算业绩</view>
          </view>
        </view>
      </view>
      <view class="orderView">
        <view class="orderTab" @click="onGoodsOrder(0)">
          <view class="activeTab">我的客户（人）</view>
          <view class="otherText">
            <text style="margin-right: 8rpx">邀请记录</text>
            <u-icon name="/static/more.png" size="14"></u-icon>
          </view>
        </view>
        <view class="tabItemView">
          <view class="tabItem" @click="onGoodsOrder(1)">
            <view class="tabNumber">{{ count.customerCount ? count.customerCount : 0 }}</view>
            <view class="tabTitle2">本月新增客户</view>
          </view>
          <view class="tabItem" @click="onGoodsOrder(1)">
            <view class="tabNumber">{{
              count.totalCustomerCount ? count.totalCustomerCount : 0
            }}</view>
            <view class="tabTitle2">全部资源客户</view>
          </view>
        </view>
      </view>

      <view class="orderView">
        <view class="tabItemView">
          <view class="tabItem" @click="onInvite()">
            <u-icon name="/static/img/tgyq.png" size="50"></u-icon>
            <view class="tabTitle2">推广邀请</view>
          </view>
          <view
            class="tabItem"
            @click="routeTo('/other_center/salesman-performance-list/salesman-performance-list')"
          >
            <u-icon name="/static/img/yjsq.png" size="50"></u-icon>
            <view class="tabTitle2">业绩申请</view>
          </view>
          <view class="tabItem" @click="onPublish()">
            <u-icon name="/static/img/spfb.png" size="50"></u-icon>
            <view class="tabTitle2">视频发布</view>
          </view>
          <view class="tabItem" @click="onMyResale">
            <u-icon :name="getImageUrl('spgl2.png')" size="50"></u-icon>
            <view class="tabTitle2">视频管理</view>
          </view>
        </view>
      </view>

      <view class="orderView">
        <view class="charts-box">
          <qiun-data-charts type="area" :opts="opts" :chartData="chartData" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      centerStatus: 1,
      navBackground: {
        background: '#00000000'
      },
      userInfo: '1',
      userCode: '',
      count: {
        waitSettlementPrice: 0,
        alreadySettlementPrice: 0
      },
      menuList: [
        {
          icon: '/static/img/wdfb2.png',
          name: '我的发布',
          path: '/other/storage-order/storage-order'
        },
        {
          icon: '/static/img/wdpt.png',
          name: '我的拼团',
          path: '/pages/group-order/group-order'
        },
        {
          icon: '/static/img/wddh.png',
          name: '我的兑换',
          path: '/other/integral-record/integral-record'
        },
        {
          icon: '/static/img/dzgl.png',
          name: '地址管理',
          path: '/other/my-comment/my-comment'
        },
        {
          icon: '/static/img/wdpl.png',
          name: '我的评论',
          path: '/other/my-interaction/my-interaction'
        },
        {
          icon: '/static/img/gywm.png',
          name: '关于我们',
          path: '/other/about-us/about-us'
        },
        {
          icon: '/static/img/yjfk.png',
          name: '意见反馈',
          path: '/other/feedback/feedback'
        },
        {
          icon: '/static/img/lxkh.png',
          name: '联系客户',
          path: '/other/help-center/help-center'
        }
      ],
      chartData: {},
      opts: {
        color: [
          '#1890FF',
          '#91CB74',
          '#FAC858',
          '#EE6666',
          '#73C0DE',
          '#3CA272',
          '#FC8452',
          '#9A60B4',
          '#ea7ccc'
        ],
        padding: [15, 15, 0, 15],
        enableScroll: false,
        legend: {},
        xAxis: {
          disableGrid: true
        },
        yAxis: {
          gridType: 'dash',
          dashLength: 2
        },
        extra: {
          area: {
            type: 'curve',
            opacity: 0.2,
            addLine: true,
            width: 2,
            gradient: true,
            activeType: 'hollow'
          }
        }
      }
    }
  },
  onShow() {
    try {
      uni.hideTabBar({
        animation: false
      })
    } catch (e) {}

    this.userInfo = uni.getStorageSync('userInfo')
    this.$u
      .get('/app-api/statistics/trade/month-brokerage-record-summary')
      .then((res) => [(this.count = res.data)])

    this.$u.get('/app-api/trade/brokerage-user/get').then((res) => {
      uni.setStorageSync('salesCode', res.data.brokerageCode)
    })

    this.initData()
  },
  onShareAppMessage() {
    return {
      path: '/pages/index/index?pid=' + this.userCode
    }
  },
  onReady() {
    this.getServerData()
  },
  methods: {
    getServerData() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        let res = {
          categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
          series: [
            {
              name: '目标值',
              data: [35, 36, 31, 33, 13, 34]
            },
            {
              name: '完成量',
              data: [18, 27, 21, 24, 6, 28]
            }
          ]
        }
        this.chartData = JSON.parse(JSON.stringify(res))
      }, 500)
    },
    initData() {},
    onLogin() {
      this.$utils.goToLogin()
    },
    onSetting() {
      this.$utils.route('/universal/setting/setting', false)
    },
    onGoodsOrder(index) {
      this.$utils.route({
        url: '/other_center/salesman-customer-list/salesman-customer-list',
        params: {
          index: index
        }
      })
    },
    onWallet() {
      this.$utils.route('/other/my-wallet/my-wallet', false)
    },
    onInvite() {
      this.$utils.route('/other_center/salesman-invite/salesman-invite', false)
    },
    onMyIntegral() {
      this.$utils.route('/other/integral/integral', false)
    },
    onPathPage(index) {
      if (index == 6) {
        uni.makePhoneCall({
          phoneNumber: '0858-8685365566',
          fail(res) {
            uni.$u.toast(JSON.stringify(res, null, 2))
          }
        })
      }
      let path = this.menuList[index].path
      this.$utils.route(path, false)
    },
    routeTo(url) {
      this.$utils.route(url, false)
    },
    onMyResale() {
      uni.navigateTo({
        url: '/other_center/mer-video/mer-video'
      })
    },
    onPublish() {
      this.$utils.route('/other_center/mer-video-push/mer-video-push')
    },
    routeToMsg() {
      uni.navigateTo({
        url: '/other_center/mer-message/mer-message'
      })
    }
  }
}
</script>

<style>
@import url('../../pages/ucenter/ucenter.css');

page {
  background: #f5f5f5;
}
</style>
